<%
button_classes = [
  "relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full
    cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2
    focus:ring-offset-2 focus:ring-input-border-focus",
  value == "true" ? "bg-lookbook-input-toggle-active" : "bg-lookbook-input-toggle"
]
span_classes = [
  "pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow ring-0 transition ease-in-out duration-200",
  value == "true" ? "translate-x-5" : "translate-x-0"
]
%>

<%= tag.button **input_options,
  class: class_names(button_classes),
  role: "switch",
  type: "button",
  "x-on:click.stop": "value = value == 'true' ? 'false' : 'true'", escape: false do %>
  <%= tag.span "aria-hidden": true, class: class_names(span_classes) %>
<% end %>
